(function(root, factory) {
	if(typeof define === 'function' && define.amd) {
		// AMD. Register as an anonymous module.
		define([], factory);
	} else if(typeof module === 'object' && module.exports) {
		// Node. Does not work with strict CommonJS, but
		// only CommonJS-like environments that support module.exports,
		// like Node.
		module.exports = factory();
	} else {
		// Browser globals (root is window)
		root['Popup'] = factory();
	}
}(this, function() {
	'use strict';
	var Popup = function(opts) {

		var _generateId = function() {
			var id = parseInt(Math.random() * 9999) + "";
			while(id.length < 4) {
				id = "0" + id;
			}
			return id;
		}

		// define property
		opts = opts || {};
		this.title = opts.title || '';
		this.content = opts.content || '';
		this.footer = opts.footer || '';
		this.data = opts.data || {};
		this.containerSelector = opts.container || "body"
		this.container = document.querySelector(this.containerSelector);
		this.modal = undefined;
		this.submit = opts.submit || function() {};
		//this.modal = document.querySelector(opts.pop);
		this.id = opts.id || "modal" + _generateId();
		this._generateModal();
	};

	Popup.prototype.show = function() {
		this._appendToContainer();
		this.modal.showModal();
		this.active();
		this.modal.focus();
	}

	/*Popup.prototype.hide = function() {
		this.inactive();
		//this.modal.style.display = "none";
		var that = this;
		setTimeout(function() {
			try {
				that.modal.close();
			} catch(e) {}
			var container = document.querySelector(that.containerSelector);
			var modal = document.querySelector("#"+that.id);
			modal.removeAttribute("open");
			container.removeChild(modal);
		}, 300)
	}*/
	Popup.prototype.hide = function() {
		this.inactive();
		//this.modal.style.display = "none";
		try {
			this.modal.close();
		} catch(e) {}
		this.modal.removeAttribute("open");
		this.container.removeChild(this.modal);
	}

	Popup.prototype.id = function() {
		return this.id
	}

	Popup.prototype.active = function() {
		var classList = this.modal.className.split(" ");
		classList.push("active");
		this.modal.className = classList.join(" ");
	}

	Popup.prototype.inactive = function() {
		var classList = this.modal.className.split(" ");
		for(var i = 0; i < classList.length; i++) {
			if(classList[i] == "active") {
				classList.splice(i, 1);
			}
		}
		this.modal.className = classList.join(" ");
	}

	Popup.prototype._generateModal = function() {
		this.modal = document.createElement("dialog");
		this.modal.id = this.id;
		this.modal.className = "col-sm-12";
		var _title = '<header> <button type="button" class="close">&times;</button><h4>' + this.title + '</h4></header> ';

		var _content = this.content ? ('<section>' + this.content + '</section> ') : '';
		var _footer = '<footer>' + this.footer + '</footer> ';
		this.modal.innerHTML = _title + _content + _footer;
	}

	Popup.prototype._appendToContainer = function() {
		this.container.insertBefore(this.modal, document.querySelector("nav").nextSibling);

		var that = this;
		this.modal.querySelector("button.close").onclick = function() {
			that.hide();
		}

		this.modal.onkeydown = function(e) {
			if(e.keyCode == 27) {
				that.hide();
			}
		}
	}

	function removeByValue(arr, val) {
		return arr;
	}

	Popup.generateInput = function(text, name, value){
		value = value ? value : '';
		return '<div> '+
		'<label>'+ text + '</label>'+
		'<input type="text" class="form-control" name="'+ name + '" value="'+ value + '"></input>'+
		' </div>'
	}
	return Popup;
}));